既然講到了AngularJS Directives，也提到了ng-model
那今天就讓我偷懶一下吧
好吧，前兩天說的東西都稍微有點硬呢！
會嗎，會覺得硬是因為你只會吃「飯粒」吧～嘿嘿
呃．．．
好啦，不鬧啦，快介紹ng-model讓我知道一下吧
OK的～難得你這麼好學！
問你唷，既然之前你知道有ng-model這個指令，那你知道他是做什麼用的嗎？
呃．．．ㄟ 逗．．．做爲AngularJS專用的變數？
是的，算是對了，但實際上的說法是，用於綁定資料到HTML標籤的值，以可做到雙向綁定的概念。
唷～原來如此
那我們來個範例吧～
(參考資料：http://www.w3schools.com/angular/angular_model.asp)
ng-model Demo1
(JS Bin:https://jsbin.com/fogenezeqi/2/edit?html,output)
Source:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<title>ng-model Demo1</title>
</head>
<body>
Test Value:<input type="text" ng-model="value_1">
{{value_1 || "Now not value"}}
</body>
</html>
Step1.加入ng-app
<html ng-app>
Step2.在內加入我們今天的範例主題
Test Value:<input type="text" ng-model="value_1">
{{value_1 || "Now not value"}}
由此範例我們可以看到，有一個輸入框，當沒有輸入任何值時，會呈現預設值「Now not value」的提示
但要是有資料時，將會把所輸入的資料即時呈現出來
這就是AngularJS雙向綁定的魅力～
補充說明：
ng-app是用來宣告angular的範圍
如果是全面使用AngularJS那需要把ng-app放在html或body。
Example:
<html ng-app> or <body ng-app>
但如果是要局部使用AngularJS的話，可以把ng-app放在將應用到的區塊
Example:
<div ng-app></div>
iThome鐵人賽
看影片追技術